<template>
  <div>
    <el-input
        style="width: 20vw"
        @keyup.enter.native="handlePagingChange"
        prefix-icon="el-icon-search"
        v-model="paging.keyWords"
        size="small"
        placeholder="输入 昵称 搜索"/>
    <el-button size="small" @click="cancel">取消</el-button>
    <el-table :border="true" :data="users" stripe style="width: 100%">
      <el-table-column label="头像" width="90" header-align="center" align="center">
        <template slot-scope="scope">
          <img width="80" height="80" :src="scope.row.avatar">
        </template>
      </el-table-column>

      <el-table-column prop="nickname" label="昵称" width="180" header-align="center" align="center">
      </el-table-column>

      <el-table-column label="登录类型" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tag effect="plain" v-if="scope.row.loginType==0">普通登录</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="禁用" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="!scope.row.isEnable?'已禁用':'未禁用'" placement="top">
            <el-switch v-if="!(scope.row.id == $store.state.userId)" v-model="scope.row.isEnable"
                       @change="updateDisable(scope.row)" active-color="#8c979e"
                       inactive-color="#fe2857">
            </el-switch>
            <el-switch v-else v-model="scope.row.isEnable" @change="updateDisable(scope.row)" active-color="#8c979e"
                       inactive-color="#fe2857" disabled>
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="ipAddress" label="ip地址" header-align="center" align="center">
      </el-table-column>

      <el-table-column label="ip源" header-align="center" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.ipSource != ''">{{ scope.row.ipSource }}</span>
          <span v-else>未知地域</span>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" width="130" label="创建时间" header-align="center" align="center">
      </el-table-column>

      <el-table-column prop="lastLoginTime" width="130" label="上次登录时间" header-align="center" align="center">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        background
        @current-change="handlePagingChange"
        :current-page.sync="paging.currentPage"
        :page-size="paging.pageSize"
        layout="prev, pager, next"
        :total="paging.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "UserList",
  methods: {
    cancel(){
      this.paging.keyWords=''
      this.handlePagingChange()
    },
    handlePagingChange() {
      this.postRequest(this.api.user+"getUsers", this.paging).then(res => {
        console.log(res)
        if (res){
          this.paging.total=res.data.count
          this.users=res.data.object
        }
      })
    },
    updateDisable(e) {
      this.putRequest(this.api.user, {
        id: e.id,
        isEnable: e.isEnable
      }).then(res => {
        if (res) {
          this.$message.success(res.message)
        }
      })
    },
  },
  data() {
    return {
      paging: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        keyWords:"",
      },
      users: [],
      flag: true
    }
  },
  mounted() {
    this.handlePagingChange()
  }
}
</script>

<style scoped>
.el-pagination {
  margin-top: 2vh;
  text-align: center;
}
</style>